<div class="container" style="min-width: 85%; padding: 5rem;">

  <p-card [header]="header">

    <form [formGroup]="form" (ngSubmit)="switchTypes()">

      <div class="grid">

        <div class="col-12 md:col-4">
          <div class="form-group">
            <label i18n="@@inputNombre">NOMBRE *</label>
            <input type="text" class="form-control" formControlName="name" id="eda_ds_name" pInputText>
          </div>
        </div>

        <div class="col-12 md:col-4">
          <div class="form-group">
            <label i18n="@@inputTipo">TIPO *</label>
            <p-dropdown [options]="dbTypes" formControlName="type" id="eda_ds_type"
              i18n-placeholder="@@placholderSelectTipo" placeholder="Selecciona un tipo" optionLabel="name"
              [style]="{width:'100%', 'min-height':'38px'}" (onChange)="selectDefaultPort()">
            </p-dropdown>
          </div>
        </div>

        <div *ngIf="form.value.type && form.value.type.value ==='oracle'" class="col-12 md:col-4">
          <div class="form-group">
            <label i18n="@@inputServidor">SERVIDOR *</label>
            <input type="text" class="form-control" formControlName="host" id="eda_ds_host" pInputText>
          </div>
        </div>

        <div *ngIf="form.value.type && form.value.type.value ==='snowflake'" class="col-12 md:col-4">
          <div class="form-group">
            <label i18n="@@inputCuenta">CUENTA *</label>
            <input type="text" class="form-control" formControlName="host" id="eda_ds_host" pInputText>
          </div>
        </div>

        <div *ngIf="!form.value.type || !['oracle', 'bigquery', 'snowflake','excel'].includes(form.value.type.value)"
          class="col-12 md:col-4">
          <div class="form-group">
            <label i18n="@@inputServidor">SERVIDOR *</label>
            <input type="text" class="form-control" formControlName="host" id="eda_ds_host" pInputText>
          </div>
        </div>

        <div *ngIf="form.value.type && form.value.type.value !== 'bigquery' && form.value.type.value !== 'jsonwebservice' && form.value.type.value !== 'excel'" class="col-12">

          <div class="grid">

            <div *ngIf="form.value.type && form.value.type.value ==='oracle'" class="col-12 md:col-4">
              <div class="form-group">
                <label>SID?</label>
                <p-dropdown [options]="sidOpts" formControlName="sid" placeholder='SID/SERVICE_NAME' optionLabel="name"
                  [style]="{width:'100%', 'min-height': '38px'}"> </p-dropdown>
              </div>
            </div>

            <div *ngIf="form.value.type && form.value.type.value ==='snowflake'" class="col-12 md:col-4">
              <div class="form-group">
                <label i18n="@@inputWarehouse">WAREHOUSE*</label>
                <input type="text" class="form-control" formControlName="warehouse" id="eda_ds_host" pInputText>
              </div>
            </div>

            <div *ngIf="form.value.type && ['oracle','snowflake'].includes(form.value.type.value)" class="col-12 md:col-4">
              <div class="form-group">
                <label i18n="@@inputNombreDb">BASE DE DATOS *</label>
                <input type="text" class="form-control" formControlName="db" id="eda_ds_db" pInputText>
              </div>
            </div>


            <div *ngIf="!form.value.type || form.value.type.value !=='oracle'" class="col-12 md:col-4">
              <div class="form-group">
                <label i18n="@@inputNombreDb2">BASE DE DATOS *</label>
                <input type="text" class="form-control" formControlName="db" id="eda_ds_db" pInputText>
              </div>
            </div>

            <div *ngIf="form.value.type && form.value.type.value ==='mysql'"  class="col-12 md:col-4">
              <div class="form-group">
                <label i18n="@@inputPoolDb">Pool Limit</label>
                <input type="number" class="form-control" formControlName="poolLimit" id="eda_ds_pool" pInputText>
              </div>
            </div>


            <div class="col-12 md:col-4">
              <div class="form-group">
                <label i18n="@@inputNombreEsquema">ESQUEMA</label>
                <input type="text" class="form-control" formControlName="schema" id="eda_ds_schema" pInputText>
              </div>
            </div>

            <div class="col-12 md:col-4" *ngIf="form.value.type.value !=='snowflake'">
              <div class="form-group">
                <label i18n="@@inputPort">PUERTO *</label>
                <input type="number" class="form-control" formControlName="port" id="eda_ds_port" pInputText>
              </div>
            </div>

            <div class="col-12 md:col-4">
              <div class="form-group">
                <label i18n="@@inputUsuario">USUARIO *</label>
                <input type="text" class="form-control" formControlName="user" id="eda_ds_user" pInputText>
              </div>
            </div>

            <div class="col-12 md:col-4">
              <div class="form-group">
                <label i18n="@@inputPassword">CONTRASEÑA *</label>
                <input type="password" class="form-control" formControlName="password" id="eda_ds_password" pInputText>
              </div>
            </div>

            <div class="col-12 md:col-4">
              <div class="form-group">
                <label i18n="@@inputFilter">FILTROS</label>
                <input type="text" class="form-control" formControlName="filter" id="eda_ds_filter" pInputText [pTooltip]="filterTooltip" tooltipPosition="left">
              </div>
            </div>

          </div>

        </div>

        <div *ngIf="form.value.type && form.value.type.value === 'bigquery'" class="col-12" style="padding: 0;">

          <label i18n="@@inputBigQueryKeys" style="padding-left:2rem">Subir archivo de claves (json) *</label>
          <div class="form-group" style="padding-left:2rem; margin-bottom: 0;">
            <app-uploadFile #fileUploader route="/global/upload/bigqueryCredentials" (onFileSaved)="fileLoaded()">
            </app-uploadFile>
          </div>
          <div class="col-12 md:col-4">
            <div class="form-group">
              <label i18n="@@inputNombreDb2">BASE DE DATOS *</label>
              <input type="text" class="form-control" formControlName="db" id="eda_ds_db" pInputText>
            </div>
          </div>

          <div class="col-12 md:col-4">
            <div class="form-group">
              <label i18n="@@inputFilter">FILTROS</label>
              <input type="text" class="form-control" formControlName="filter" id="eda_ds_filter" pInputText>
            </div>
          </div>
        </div>
        <div *ngIf="form.value.type && form.value.type.value === 'excel'" class="col-12 md:col-4">
          <div class="form-group">
            <input type="file" #excelFile style="display: none"  (change)="excelFileLoaded($event)" />
            <button pButton pRipple type="button" icon="pi pi-upload" class="p-button-rounded p-button-outlined mt-5" [disabled]="uploading || uploadSuccessful"
            (click)="addExcelFile()" style="margin:0.2em"></button>
            <label class="ml-2">{{excelFile.value !== "" ? excelFileName : "Subir archivo Excel (.xlsx & .xls)"}}</label>
          </div>
        </div>

        <div class="col-12 md:col-12">
          <p-checkbox [ngStyle]="{'border': '0ch'}" class="form-control" formControlName="optimize"
            [label]="optimizeString" [binary]="true">
          </p-checkbox>
          <p-checkbox [ngStyle]="{'border': '0ch'}" class="form-control" formControlName="allowCache"
            [label]="allowCacheSTR" [binary]="true">
          </p-checkbox>
          <p-checkbox *ngIf="form.value.type && (form.value.type.value ==='postgres' || form.value.type.value ==='mysql' || form.value.type.value ==='sqlserver')" [ngStyle]="{'border': '0ch'}" class="form-control" formControlName="ssl"
            [label]="allowSSLSTR" [binary]="true">
          </p-checkbox>
        </div>
        <div class="col-12 md:col-12" style="text-align: right;">
          <button type="submit" pButton icon="fa fa-save" i18n-label="@@guardarBtn" label="Guardar"
            id="eda_ds_guardar"></button>
        </div>
      </div>

    </form>



  </p-card>


</div>
<p-confirmDialog></p-confirmDialog>
